<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷调查-新建</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/ptwj.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app" :questId='questId={{questId}}'>
        <div id="header">

            <ul class="layui-nav" lay-bar="disabled">
                <li class="layui-nav-item" lay-unselect="" style="color: #CFCEDC;font-size: 18px;">
                    <i><img src="/img/navimg.png" alt=""></i>问卷调查系统
                </li>
            </ul>
        </div>
        <div id="option">
            <div class="outline"><span>选项大纲</span></div>
            <div class="option-list">
                <ul>

                    <li v-for='item in list'>{% raw %}{{item.id}}{% endraw %}&nbsp;{% raw %}{{item.content}}{% endraw %}
                    </li>

                </ul>

            </div>
            <div class="sav-result">

                {% if questId===0 %}
                <button type="button" class="layui-btn layui-btn-primary" @click="savequestionnaire">保存</button>
                <button class="layui-btn layui-btn-normal" @click="dialogFormVisible = true">创建问卷</button>
                <a href="/" style="display: block;margin-top: 6px;"><button type="button"
                        class="layui-btn layui-btn-primary">取消</button></a>
                {% else %}
                <button type="button" class="layui-btn layui-btn-primary" @click="editSavequest">保存</button>
                <a href="/" style="display: block;margin-top: 6px;"><button type="button"
                        class="layui-btn layui-btn-primary">取消</button></a>
                {% endif %}
            </div>
        </div>

        <div id="write-wj">
            <div class="content">
                <ul class="content-ul">
                    <li class="content-li">
                        <div>
                            <input type="text" id="quest-title" v-model.lazy='title' class='myinput-css head-title'
                                placeholder="问卷主题">
                        </div>
                    </li>
                    <li class="content-li">
                        <div>
                            <input type="text" id="quest-remark" v-model.lazy='remark' placeholder="说明"
                                class="myinput-css describe-t">
                        </div>
                    </li>
                    <template v-for='item in list'>
                        <my-text :key='item.id' :onelist='item' v-if='item.type===3'></my-text>
                        <my-radio :key='item.id' :onelist='item' v-else>
                            <input type="radio" v-if='item.type===1'>
                            <input type="checkbox" v-else-if='item.type===2'>
                        </my-radio>
                    </template>


                    <component :is="isAddType" v-if='isAdd' :typeid='isAddinputType'></component>


                    <li class="content-li add-content" id="selects">
                        <div class="radio" @click='addRadioClick'><i></i> 单选</div>
                        <div class="check" @click='addCheckClick'><i></i> 复选</div>
                        <div class="text" @click='addTextClick'><i></i> 文本</div>
                    </li>
                </ul>

            </div>
        </div>
        <el-dialog title="选择截止时间" :visible.sync="dialogFormVisible" style="height: 400px;" :close-on-click-modal="false"
            :show-close="false">

            <el-date-picker v-model="endTime" type="date" :picker-options="timeChange" placeholder="选择日期">
            </el-date-picker>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="createquestionnaire">确 定</el-button>
            </div>


        </el-dialog>
    </div>



    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/base.js"></script>
    <script src="/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!-- 模板 -->
    <script type='text/x-template' id='radio'>
        <li class="content-li" id="add-content" v-if='isbj'>
            <div class="add-title"><span>题目：</span><span><input type="text" v-model.lazy='newOp.content' class="myinput-css hae"
                        id='titleop'></span></div>
            <div class="add-remark"><span>备注：</span><span><input type="text" v-model.lazy='newOp.remark' class="myinput-css hae"
                        id='remarkop'></span></div>

            <div class="opi">
                <ul>
                    <li class="childop" v-for='item in newOp.options' :key='item.id'>
                        <div>
                            <input type="text" class="myinput-css chop" v-model.lazy='item.content'>
                        </div>
                        <i @click='remChildOp(item.id)'></i>
                    </li>
                </ul>
                <div class="addop add-content"><a href="javascript:;" @click='addOp'>添加新项</a></div>
            </div>

            <div class="opli">
                <button class="layui-btn layui-btn-primary layui-border-black" id="canelop" @click='isbj=false'>取消</button>
                <button class="layui-btn layui-btn-normal" id="crnewop" @click='confim'>确定</button>
            </div>

        </li>
        <li class="content-li content-list sel-li" v-else @mouseover='isShow=true' @mouseout='isShow=false'>
            <div class="bt-title">
                <span>{% raw %}{{onelist.id}}{% endraw %}.</span>
                &nbsp;
                <span>{% raw %}{{onelist.content}}{% endraw %}</span>
            </div>
            <div class="rolist">
                <div class='remark'>{% raw %}{{onelist.remark}}{% endraw %}</div>
                <ul>
                    <li v-for='item in onelist.options' :key='item.id'><slot>-</slot>{% raw %}{{item.content}}{% endraw %}</li>
                </ul>
                    <div class='icolist' v-show='isShow'>
                        <div class="bj-ico" @click='compileOp'>
                            <i class="bj" title="编辑"></i>
                        </div>
                        <div class="rm-ico" @click='removeOp(onelist.id)'>
                            <i class="rm" title="删除"></i>
                        </div>
                    </div>
            </div>

        </li>
        
    </script>
    <!-- 单选题 -->
    <script type="text/x-template" id="add-radio">
        <li class="content-li" id="add-content">
            <div class="add-title"><span>题目：</span><span><input type="text" v-model.lazy='opObj.content' class="myinput-css hae"
                        id='titleop'></span></div>
            <div class="add-remark"><span>备注：</span><span><input type="text" v-model.lazy='opObj.remark' class="myinput-css hae"
                        id='remarkop'></span></div>

            <div class="opi">
                <ul>
                    <li class="childop" v-for='item in opObj.options' :key='item.id'>
                        <div>
                            <input type="text" class="myinput-css chop" v-model.lazy='item.content'>
                        </div>
                        <i @click='remChildOp(item.id)'></i>
                    </li>
                </ul>
                <div class="addop add-content"><a href="javascript:;" @click='addOp'>添加新项</a></div>
            </div>

            <div class="opli">
                <button class="layui-btn layui-btn-primary layui-border-black" id="canelop" @click='caneClick'>取消</button>
                <button class="layui-btn layui-btn-normal" id="crnewop" @click='confimClick'>确定</button>
            </div>

        </li>
    </script>

    <script type="text/x-template" id="mytext">

        <li class="content-li" id="add-content" v-if='isbj'>
            <div class="add-title"><span>题目：</span><span><input type="text" v-model.lazy='newOp.content' class="myinput-css hae"
                    id='titleop'></span></div>
            <div class="add-remark"><span>备注：</span><span><input type="text" v-model.lazy='newOp.remark' class="myinput-css hae"
                        id='remarkop'></span></div>

            <div class="opli">
                <button class="layui-btn layui-btn-primary layui-border-black" id="canelop" @click='caneClick'>取消</button>
                <button class="layui-btn layui-btn-normal" id="crnewop" @click='confimClick'>确定</button>
            </div>

        </li>

        <li class="content-li content-list sel-li" v-else @mouseover='isShow=true' @mouseout='isShow=false'>
            <div class="bt-title">
                <span>{% raw %}{{onelist.id}}{% endraw %}</span>
                &nbsp;
                <span>{% raw %}{{onelist.content}}{% endraw %}</span>
            </div>
            <div class="rolist">
                <div class='remark'>{% raw %}{{onelist.remark}}{% endraw %}</div>
                <div><input type="text" class="myinput-css text-cont"></div>
                <div class='icolist' v-show='isShow'>
                    <div class="bj-ico" @click='compileOp'>
                        <i class="bj" title="编辑"></i>
                    </div>
                    <div class="rm-ico" @click='removeOp(onelist.id)'>
                        <i class="rm" title="删除"></i>
                    </div>
                </div>
            </div>

        </li>
    </script>

    <script type="text/x-template" id="add-text">
        <li class="content-li" id="add-content">
            <div class="add-title"><span>题目：</span><span><input type="text" v-model.lazy='opObj.content' class="myinput-css hae"
                        id='titleop'></span></div>
            <div class="add-remark"><span>备注：</span><span><input type="text" v-model.lazy='opObj.remark' class="myinput-css hae"
                        id='remarkop'></span></div>

            <div class="opli">
                <button class="layui-btn layui-btn-primary layui-border-black" id="canelop" @click='caneClick'>取消</button>
                <button class="layui-btn layui-btn-normal" id="crnewop" @click='confimClick'>确定</button>
            </div>

        </li>
    </script>

    <script>
        let bus = new Vue();
        Vue.component('my-radio', {
            data() {
                return {
                    isbj: false,
                    isShow: false,
                    newOp: {}
                }
            },
            template: '#radio',
            props: ['onelist'],
            mounted() {
                this.newOp = this.onelist
            },
            methods: {
                remChildOp(id) {//删除子选项

                    this.newOp.options = this.newOp.options.filter(item => item.id !== id)
                },
                addOp() {
                    this.newOp.options.push({
                        id: this.newOp.options.length + 1,
                        content: ''
                    })
                },
                removeOp: function (id) {
                    console.log('删除', id);
                    bus.$emit('removeop', id)
                },
                compileOp: function () {
                    this.isbj = true

                },
                confim: function () {
                    let isEmpty = this.newOp.options.every(item => item.content !== '')

                    if (isEmpty && this.newOp.content.trim() !== '') {
                        this.isbj = false,
                            bus.$emit('bjoption', this.newOp)
                    }
                    else {
                        layer.msg('题目或者选项不能为空', {
                            offset: 't',
                            icon: 5
                        });
                    }


                }
            },

        })

        Vue.component('add-radio', {
            template: '#add-radio',
            props: ['typeid'],
            data() {
                return {
                    opObj: {
                        id: 0,
                        content: '',
                        type: this.typeid,
                        remark: '',
                        options: [{
                            id: 1,
                            content: ''
                        }, {
                            id: 2,
                            content: ''
                        }]
                    }
                }
            },
            methods: {
                remChildOp(id) {//删除子选项
                    this.opObj.options.forEach((item, index) => {
                        console.log(index);

                        if (item.id === id) {
                            this.opObj.options.splice(index, 1)
                        }
                    })
                },
                addOp() {
                    this.opObj.options.push({
                        id: this.opObj.options.length + 1,
                        content: ''
                    })
                },
                caneClick() {//取消
                    console.log('取消');
                    bus.$emit('caneAdd', false)
                },
                confimClick() {//确定
                    let isEmpty = this.opObj.options.every(item => item.content !== '')
                    if (isEmpty && this.opObj.content.trim() !== '')
                        bus.$emit('addtopic', this.opObj)
                    else
                        layer.msg('题目或者选项不能为空', {
                            offset: 't',
                            icon: 5
                        });
                }
            },
        })

        Vue.component('my-text', {
            data() {
                return {
                    isbj: false,
                    isShow: false,
                    newOp: {}
                }
            },
            mounted() {
                this.newOp = this.onelist
            },
            template: '#mytext',
            props: ['onelist'],
            methods: {
                removeOp: function (id) {
                    console.log('删除', id);
                    bus.$emit('removeop', id)
                },
                compileOp: function () {
                    this.isbj = true
                },
                caneClick() {//取消
                    this.isbj = false
                },
                confimClick() {//确定
                    if (this.newOp.content.trim() !== '') {
                        this.isbj = false,
                            bus.$emit('bjoption', this.newOp)
                    }
                    else
                        layer.msg('题目或者选项不能为空', {
                            offset: 't',
                            icon: 5
                        });
                }
            },

        })

        Vue.component('add-text', {
            template: '#add-text',
            props: ['typeid'],
            data() {
                return {
                    opObj: {
                        id: 0,
                        content: '',
                        type: this.typeid,
                        remark: '',
                        options: []
                    }
                }
            },
            methods: {
                caneClick() {//取消
                    console.log('取消');
                    bus.$emit('caneAdd', false)
                },
                confimClick() {//确定
                    if (this.opObj.content.trim() !== '')
                        bus.$emit('addtopic', this.opObj)
                    else
                        layer.msg('题目或者选项不能为空', {
                            offset: 't',
                            icon: 5
                        });
                }
            },
        })

        new Vue({
            el: '#app',
            data() {
                return {
                    questId: 0,
                    title: '',
                    remark: '',
                    isAddType: 'add-radio',
                    isAdd: false,
                    isAddinputType: 1,
                    list: [],
                    dialogFormVisible: false,
                    endTime: null,
                    timeChange: {
                        disabledDate(time) {
                            return time.getTime() < Date.now() - 8.64e7 //过去时间不可选
                        }
                    },
                }
            },
            mounted() {
                bus.$on('caneAdd', (data) => {
                    this.isAdd = data
                })

                bus.$on('addtopic', (data) => {
                    data.id = this.list.length + 1;
                    this.list.push(data)
                    this.isAdd = false
                })

                bus.$on('removeop', (id) => {
                    this.list = this.list.filter(item => item.id !== id)
                    this.list.map((item, index) => item.id = index + 1)
                })

                bus.$on('bjoption', (data) => {
                    this.list.forEach(item => {
                        if (item.id === data.id) {
                            item = data
                        }
                    })
                })

                //编辑获取数据
                if (this.questId !== 0) {
                    axios.get(`/home/edit/commonquest/?questId=${this.questId}`)
                        .then(res => {
                            res = res.data
                            if (res.code === 200) {
                                this.title = res.data.title
                                this.remark = res.data.remark
                                this.list = res.data.list
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                }
            },
            methods: {
                addRadioClick() {
                    if (this.isAdd === true) return;
                    this.isAddType = 'add-radio';
                    this.isAddinputType = 1;
                    this.isAdd = true;
                    setTimeout(() => {
                        scrollY();
                    }, 30);

                },
                addCheckClick() {
                    if (this.isAdd === true) return;
                    this.isAddType = 'add-radio';
                    this.isAddinputType = 2;
                    this.isAdd = true;
                    setTimeout(() => {
                        scrollY();
                    }, 30);
                },
                addTextClick() {
                    if (this.isAdd === true) return;
                    this.isAddType = 'add-text';
                    this.isAddinputType = 3;
                    this.isAdd = true;
                    setTimeout(() => {
                        scrollY();
                    }, 30);
                },
                createquestionnaire: function () {
                    let quest = {
                        title: this.title,
                        remark: this.remark,
                        endTime: this.endTime,
                        list: this.list
                    }

                    axios.post('/home/wjs/addcommonquest', quest)
                        .then(res => {
                            this.dialogFormVisible = false;
                            res = res.data
                            if (res.code === 200) {
                                location.href = '/'
                            } else {
                                console.log(res);
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                },
                savequestionnaire: function () {
                    let quest = {
                        title: this.title,
                        remark: this.remark,
                        list: this.list
                    }

                    axios.post('/home/wjs/savecommonquest', quest)
                        .then(res => {
                            this.dialogFormVisible = false;
                            res = res.data
                            if (res.code === 200) {
                                location.href = '/'
                            } else {
                                console.log(res);
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })

                    // 
                },
                editSavequest:function(){
                    let quest = {
                        questId:this.questId,
                        title: this.title,
                        remark: this.remark,
                        list: this.list
                    }

                    axios.post('/home/edit/confimcommonquest', quest)
                        .then(res => {
                            this.dialogFormVisible = false;
                            res = res.data
                            if (res.code === 200) {
                                location.href = '/'
                            } else {
                                console.log(res);
                            }
                        })
                        .catch(err => {
                            console.log(err);
                        })
                }
            
            },
        })

        function scrollY() {
            $('#write-wj .content').scrollTop($('#write-wj .content').prop("scrollHeight"), 200)
        }
    </script>
</body>

</html>